<template>
  <div>
    <div class="emissionSourceDictionary">
      <!-- 标题 -->
      <div class="emissionSourceDictionary-title">排放源字典</div>


      <!-- 条件筛选 -->
      <div class="-condition">
        <div class="emissionSourceDictionary-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>

      </div>
      <div class="emissionSourceDictionary-condition-btn">
        <el-button>查询</el-button>
        <el-button>重置</el-button>
        <el-button @click="add" id="v-step-0">新增</el-button>
        <el-button @click="dao">导入</el-button>
      </div>


      <!-- 表格-核算报告 -->
      <div class="emissionSourceDictionary-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>
    </div>
    <!-- 步骤引导 -->
    <v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'emissionSourceDictionary',
  components: {
    NormalTable,
    NormalFormPlus
  },
  mounted() {
    this.initTableData()
    // this.tour()
  },
  data() {
    return {
      myOptions: {
        useKeyboardNavigation: false, // 是否通过键盘的←, → 和 ESC 控制指引
        labels: { // 指引项的按钮文案
          buttonSkip: "跳过指引", // 跳过文案
          buttonPrevious: "上一步", // 上一步文案
          buttonNext: "下一步", // 下一步文案
          buttonStop: "下一步" // 结束文案
        },
        highlight: false // 是否高亮显示激活的的target项
      },
      steps: [
        {
          target: "#v-step-0", // 当前项的id或class或data-v-step属性
          content: "点击新增按钮，添加排放源", // 当前项指引内容
          params: {
            placement: "bottom", // 指引在target的位置，支持上、下、左、右
            highlight: false, // 当前项激活时是否高亮显示
            enableScrolling: false // 指引到当前项时是否滚动轴滚动到改项位置
          },
        },
      ],
      formModel: {
        facility: null,// 排放设施
        ghgClassification: null,// GHG分类
        isoClassification: null,//	ISO分类
        name: null,// 排放源名称
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '2',
              edit: true,
              type: 'input',
              span: 4,
              model: 'name',
              name: '',
              props: {
                placeholder: "排放源名称",
                width: 150
              }
            },
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 4,
              model: 'facility',
              name: '',
              props: {
                placeholder: "排放设施",
                width: 150
              }
            },
            {
              id: '4',
              edit: true,
              type: 'select',
              span: 4,
              model: 'ghgClassification',
              name: '',
              props: {
                placeholder: "GHG分类",
                options: [
                  {value: '范围一', label: '范围一'},
                  {value: '范围二', label: '范围二'},
                  {value: '范围三', label: '范围三'},
                ]
              }
            },
            {
              id: '5',
              edit: true,
              type: 'select',
              span: 4,
              model: 'isoClassification',
              name: '',
              props: {
                placeholder: "ISO分类",
                options: [
                  {value: '其他间接排放', label: '其他间接排放'},
                  {value: '供应链下游间接排放', label: '供应链下游间接排放'},
                  {value: '外购产品或服务间接排放', label: '外购产品或服务间接排放'},
                  {value: '运输间接排放', label: '运输间接排放'},
                  {value: '能源间接排放', label: '能源间接排放'},
                  {value: '直接排放或清除', label: '直接排放或清除'},
                ]
              }
            }

          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "排放源名称",

        },
        // {
        //   prop: "id",
        //   label: "排放源ID",
        //   width:70
        // },
        {
          prop: "facility",
          label: "排放设施/活动",

        },
        {
          prop: "ghgClassification",
          label: "GHG分类",
          width: 100
        },
        {
          prop: "isoClassification",
          label: "ISO分类",
          width: 120
        },
        {
          prop: "updater",
          label: "更新人",
        },
        {
          prop: "@updateTime",
          label: "更新时间",
          width: 200
        },
      ],

    }
  },
  methods: {
    tour() {
      this.$tours["myTour"].start();
      var _this = this
      var interval = setInterval(function () {
        _this.$router.push("/enterpriseCarbonAccounting/carbonEmissionManage/addEmissionSourceDictionary")
        clearInterval(interval)
      }, 2000)
    },
    // 添加排放源字典
    add() {
      console.log("adding...")
      this.$router.push("/enterpriseCarbonAccounting/carbonEmissionManage/addEmissionSourceDictionary")
    },
    dao() {
      this.$router.push("/enterpriseCarbonAccounting/carbonEmissionManage/importEmissionSource")
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$router.push({
          path: '/enterpriseCarbonAccounting/carbonEmissionManage/addEmissionSourceDictionary',
          query: {id: row.id}
        })
      }
    },
    // 分页点击事件
    changePage() {
      this.initTableData()
    },
    //初始化表格
    initTableData() {
      if (this.$MOCK.mock) {
        this.tableData = this.$MOCK.enterprise.emissionSourceDictionary.data.list
        this.paginationConfig.total = this.$MOCK.enterprise.emissionSourceDictionary.data.total
        return
      }
      this.$API.enterprise.getEmissionSourceList({
        ...this.formModel,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emissionSourceDictionary {

  height: auto;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .emissionSourceDictionary-title {
    font-size: 16px;
    font-weight: bold;
  }

  .emissionSourceDictionary-condition {
    display: flex;

    .emissionSourceDictionary-condition-form {
      flex: 3;
    }

    .emissionSourceDictionary-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .emissionSourceDictionary-report {
    .emissionSourceDictionary-history-title {
      font-size: 14px;
    }
  }
}
</style>
